<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>多行文本溢出省略</title>  
<style>  
  .multi-line-ellipsis {  
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4; /* 设置显示的行数 */
    overflow: hidden; /* 隐藏溢出内容 */  
    text-overflow: ellipsis; /* 虽然对多行文本无效，但写上也无妨 */  
    width: 200px; /* 设置容器的宽度 */  
    border: 1px solid #000; /* 可选，为了展示效果添加边框 */   
  }  
</style>  
</head>  
<body>  
  
<div class="multi-line-ellipsis">  
  这是一段很长的文本，它将会溢出容器并被省略。这是第一行。这是第二行。这是第三行。这是第四行，它将被省略。  
</div>  
  
<!-- 如果需要跨浏览器兼容性，可以考虑使用JavaScript库如clamp.js -->  
  
</body>  
</html>